<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第三方登录</title>
</head>
<body>

第三方登录：<input type="hidden" id="qq" value="">
<img  src="/img/Connect_logo_1.png" onClick="qqLogin()" />QQ登录


</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    /**
     * 封装一个居中打开新窗口的方法
     */
    function openWindow(url, width, height) {
        width = width || 600;
        height = height || 400;
        var left = (window.screen.width - width) / 2;
        var top = (window.screen.height - height) / 2;
        window.open(url, "_blank", "toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, left=" + left + ", top=" + top + ", width=" + width + ", height=" + height);
    }

    function qqLogin() {
        var qqAppId = '424323422'; // 上面申请得到的appid
        var qqAuthPath = 'http://127.0.0.1:8080/authqq'; // 前面设置的回调地址
        var state = '123456'; // 防止CSRF攻击的随机参数，必传，登录成功之后会回传，最好后台自己生成然后校验合法性
        openWindow(`https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=${qqAppId}&redirect_uri=${encodeURIComponent(qqAuthPath)}&state=${state}`);
    }
</script>
</html>